<template>
  
  <div class="shop-list">
    <nav-bar class="header">
      <div class="back" slot="left" @click="backClick">
        <img src="~assets/img/common/back.svg" alt="">
      </div>
      <div class="title" slot="center">
        商品列表
      </div>
    </nav-bar>
    <scroll 
    class="container"
    ref="scroll"
    :probetype="3"
    @scroll="scrollPosition"
    :pull-up-load="true"
    @pullingUp="loadMore"
    >
      <router-link 
      tag="div" 
      class="goods-list" 
      v-for="good in goods" 
      :key="good.id" 
      :to="{path:'/shop/shopdetail/'+ good.goods_id}">
          <div class="left">
            <img 
            :src="good.goods_small_logo?good.goods_small_logo:'https://img-blog.csdnimg.cn/20200628145700763.jpg'" alt="">
          </div>
          <div class="right">
            <div class="text">
              {{good.goods_name}}
            </div>
            <div class="price">
              ￥{{good.goods_price}}
            </div>
          </div>
      </router-link>
    </scroll>
    <back-top @click.native="topClick" v-show="isShow"/>
  </div>
 
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/BackTop'

import {getShopListData} from 'network/shop'
export default {
  name:'ShopList',
  components:{
    NavBar,
    Scroll,
    BackTop,
  },
  data(){
    return{
      message:null,
      goods:[],
      // 请求参数
      queryparams:{
        query:'',
        cat_id:'',
        pagenum:1,
        pagesize:10
      },
      isShow:false,
      // 是否还有下一页
      hasMore:true,
      // 总页数
      pageTotal:1,
      stateY:0
    }
  },
  created(){
    this.getShopListData()
  },
 
  methods:{
    getShopListData(){
      // 可能请求的api数据有问题，改变了id获取的数据也是一样的，哎，弄了好久···
      this.queryparams.cat_id = this.$route.params.cat_id
      getShopListData(this.queryparams).then(res =>{
        this.message = res.data.message
        // 计算总页数（总的商品条数/每页的数量）
        this.pageTotal = Math.ceil(this.message.total / this.queryparams.pagesize)
        
        if(res.data.message.goods.length === 0){
          this.hasMore = false
          return
        }
        this.goods =[...this.goods,...res.data.message.goods]  
        this.$refs.scroll.finishPullUp()
      })
    },
    backClick(){
      this.$router.back()
    },
    topClick(){
      this.$refs.scroll.scrollTo(0,0,0)
    },
    scrollPosition(position){
      this.isShow = Math.abs(position.y) > 1000
    },
    
    // 加载下一页
    loadMore(){
      if(this.hasMore){
        if(this.queryparams.pagenum < this.pageTotal){
          this.$toast.show('加载中',500)
          this.queryparams.pagenum++;
          this.getShopListData()
        }
      }
    }
  },
  
  activated(){
      setTimeout(() => {
        this.$refs.scroll.scrollTo(0,this.stateY,0)
      }, 0)
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      });
     
  },
  deactivated(){
    this.stateY = this.$refs.scroll.getScrollY() 
  }
}
</script>

<style scoped>
  .shop-list{
    height: 100vh;
    position: relative;
  }
  .header{
    background: #fff;
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
  }
  .back img{
    vertical-align: middle;
  }
  .container{
    overflow: hidden;
    position: absolute;
    top:44px;
    bottom: 0;
    left:0;
    right: 0;
  }
  .goods-list{
    display: flex;
    padding: 5px 10px;
  }
  .goods-list .left{
    flex:1;
    margin-right: 10px;
  }
  .goods-list .left img{
    width: 100%;
    border-radius: 4px;
  }
  .goods-list .right{
    flex:2;
    font-size:14px;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
  }
  .goods-list .right .text{
    flex: 1;
  }
  .goods-list .right .price{
    color:var(--color-tint);
  }
</style>